import React, {useEffect, useState} from "react"
// import Taro from '@tarojs/taro'
import {Map} from '@tarojs/components'
import {MapProps} from '@tarojs/components/types/Map'
import QQMapWX from '@/assets/lib/qqmap-wx-jssdk'
import config from '@/config/index'
import {polylineDecompressionDriving} from '@/packageB/utils/map'
import RouteDriving from '@/type/driving'
// import plugin from 'routePlan'
// import marker1 from './marker1.png'
// import marker from './marker.png'
import './TravelMap.scss'

// let plugin = requirePlugin('routePlan');
export interface Location {
  accuracy?: number
  horizontalAccuracy?: number
  latitude: number
  longitude: number
  speed?: number
  verticalAccuracy?: number

  [key: string]: any
}

// interface Result {
//   setOutTime: string
//   distance: string
//   duration: string
//   desc: string[]
//   polyline: MapProps.polyline[]
//   points: {
//     latitude: number
//     longitude: number
//   }[]
//   latitude: number
//   longitude: number
//   markers: MapProps.marker[]
// }

// interface Step {
//   mode: string
//   polyline: number[]
//   lines: [{
//     vehicle: string
//     title: string
//     station_count: string
//     polyline: number[]
//     geton: {
//       title: string
//     }
//     getoff: {
//       title: string
//     }
//   }]
// }

interface Props {
  location: Location
}

// interface StepPolyline {
//   colorIndex: number
// }

const QQMapSDK = new QQMapWX({
  key: config.qqMapKey || ''
})

const TravelMap: React.FC<Props> = React.memo(() => {
  // const {location} = props

  // const [markers, setMarkers] = useState<MapProps.marker[]>()
  //
  // const [currentRouteIndex, setCurrentRouteIndex] = useState(0)
  const [routes, setRoutes] = useState<MapProps.polyline[]>()
  //
  // const [stepPolyline, setStepPolyline] = useState<StepPolyline>({
  //   colorIndex: 0
  // })

  useEffect(() => {
    // QQMapSDK.search({
    //   keyword: '酒店',
    //   success: function (res) {
    //     console.log(res)
    //   },
    //   fail: function (res) {
    //     console.log(res)
    //   },
    //   complete: function (res) {
    //     console.log(res)
    //   }
    // })
    queryMapRoutine()
  }, [])

  // useEffect(() => {
  //   console.log(routes)
  // }, [routes])
  //
  // useEffect(() => {
  //   setMarkers([
  //     {
  //       id: 1,
  //       latitude: 30.006867,
  //       longitude: 106.246223,
  //       iconPath: marker1,
  //       width: 32,
  //       height: 32,
  //       zIndex: -1,
  //       customCallout: {
  //         anchorY: 0,
  //         anchorX: 20,
  //         display: 'ALWAYS',
  //       },
  //     }
  //   ])
  // }, [])

  function onMapClick () {

  }

  function queryMapRoutine () {
    QQMapSDK.direction({
      mode: 'driving',
      // from 不填默认为当前位置
      from: '30.006867,106.246223',
      to: '30.663729,107.708478',
      get_mp: 1, // 0 返回一条路径， 1 返回多方案
      success (res) {
        console.log('开始', res)
        let retRoutes = res.result.routes
        retRoutes = retRoutes.map(r => parseRoute(r))
        console.log(retRoutes)
        // setRoutes(retRoutes)
        // setCurrentRouteIndex(0)
      },
      fail (err) {
        console.log(err)
      }
    })
  }


  // let key = 'N6VBZ-XPIKU-AKTVZ-2HICQ-B6T4H-TPFQE'  //使用在腾讯位置服务申请的key
  // let referer = 'yoto'   //调用插件的小程序的名称
  // let startPoint = JSON.stringify({  //起点
  //   'name': '中国技术交易大厦',
  //   'latitude': 39.984154,
  //   'longitude': 116.30749
  // });
  // let endPoint = JSON.stringify({  //终点
  //   'name': '北京西站',
  //   'latitude': 39.894806,
  //   'longitude': 116.321592
  // })
  // Taro.navigateTo({
  //   url: 'plugin://routePlan/route-plan?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
  // })

  // const currentRoute = useMemo((): Result => {
  //    return routes?.[currentRouteIndex] ?? {}
  // }, [routes, currentRouteIndex])

  // 解析路线，包括距离，时间，描述，路线，起止点等
  function parseRoute (route: RouteDriving) {
    console.log(route)
    // let result: Result | any = {}
    let polyline = polylineDecompressionDriving(route.polyline)
    console.log(polyline)
    setRoutes([polyline])
    // result.markers = [
    //   {
    //     iconPath: marker1,
    //     id: 0,
    //     latitude: startPoint.latitude,
    //     longitude: startPoint.longitude,
    //     width: 32,
    //     height: 32,
    //     zIndex: -1,
    //     anchor: {x: 0.5, y: 1}
    //   },
    //   {
    //     iconPath: marker,
    //     id: 1,
    //     latitude: endPoint.latitude,
    //     longitude: endPoint.longitude,
    //     width: 32,
    //     height: 32,
    //     zIndex: -1,
    //     anchor: {x: 0.5, y: 1}
    //   }
    // ]
  }

  useEffect(() => {
    console.log(routes)
  }, [routes])

  // // 解析路线，包括距离，时间，描述，路线，起止点等
  // function parseRoute (route: Route): Result {
  //   let result: Result | any = {}
  //   result.setOutTime = formatTime(new Date())
  //   result.distance = route.distance < 1000 ?
  //     `${route.distance}米` :
  //     `${(route.distance / 1000).toFixed(2)}公里`
  //   result.duration = route.duration < 60 ?
  //     `${route.duration}分钟` :
  //     `${parseInt(String(route.duration / 60))}小时${route.duration % 60}分钟`
  //   result.desc = []
  //   route.steps.forEach(step => {
  //     // if (step.mode == 'WALKING' && step.distance > 0) {
  //     //   result.desc.push(`向${step.direction}步行${step.distance}米`)
  //     // }
  //     if (step.mode == 'TRANSIT' && step.lines[0]) {
  //       let line = step.lines[0]
  //       if (line.vehicle == 'BUS') line.title = `公交车-${line.title}`
  //       if (line.vehicle == 'RAIL') line.title = `铁路`
  //       result.desc.push(`${line.title}: ${line.geton.title} —> ${line.getoff.title}，途经 ${line.station_count} 站。`)
  //     }
  //   })
  //   result.polyline = []
  //   result.points = []
  //   //获取各个步骤的polyline
  //   for (let i = 0; i < route.steps.length; i++) {
  //     let step = route.steps[i]
  //     let polyline = getStepPolyline(step)
  //     if (polyline) {
  //       result.points = result.points.concat(polyline.points)
  //       result.polyline.push(polyline)
  //     }
  //   }
  //   setStepPolyline({
  //     colorIndex: 0
  //   })
  //   let midPointIndex = Math.floor(result.points.length / 2)
  //   result.latitude = result.points[midPointIndex].latitude
  //   result.longitude = result.points[midPointIndex].longitude
  //
  //   //标记起止点
  //   let startPoint: {
  //     latitude: string
  //     longitude: string
  //   } = result.points[0]
  //   let endPoint = result.points[result.points.length - 1]
  //   result.markers = [
  //     {
  //       iconPath: marker1,
  //       id: 0,
  //       latitude: startPoint.latitude,
  //       longitude: startPoint.longitude,
  //       width: 32,
  //       height: 32,
  //       zIndex: -1,
  //       anchor: {x: 0.5, y: 1}
  //     },
  //     {
  //       iconPath: marker,
  //       id: 1,
  //       latitude: endPoint.latitude,
  //       longitude: endPoint.longitude,
  //       width: 32,
  //       height: 32,
  //       zIndex: -1,
  //       anchor: {x: 0.5, y: 1}
  //     }
  //   ]
  //   return result
  // }
  //
  // function getStepPolyline(step: Step) {
  //   let coors: number[][] = [];
  //   let colorArr = ['#1aad19', '#10aeff', '#d84e43']
  //   let _dottedLine = true
  //   if (step.mode == 'WALKING' && step.polyline) {
  //     coors.push(step.polyline);
  //     _dottedLine = false
  //   } else if (step.mode == 'TRANSIT' && step.lines[0].polyline) {
  //     coors.push(step.lines[0].polyline);
  //   } else {
  //     return null
  //   }
  //   //坐标解压（返回的点串坐标，通过前向差分进行压缩）
  //   let kr = 1000000;
  //   for (let i = 0 ; i < coors.length; i++){
  //     for (let j = 2; j < coors[i].length; j++) {
  //       coors[i][j] = Number(coors[i][j - 2]) + Number(coors[i][j]) / kr;
  //     }
  //   }
  //   //定义新数组，将coors中的数组合并为一个数组
  //   let coorsArr: number[][] = [];
  //   let _points: {latitude: number[], longitude: number[]}[] = [];
  //   for (let i = 0 ; i < coors.length; i ++){
  //     coorsArr = coorsArr.concat(coors[i]);
  //   }
  //
  //   //将解压后的坐标放入点串数组_points中
  //   for (let i = 0; i < coorsArr.length; i += 2) {
  //     _points.push({ latitude: coorsArr[i], longitude: coorsArr[i + 1] })
  //   }
  //   if (!stepPolyline.colorIndex) {
  //     stepPolyline.colorIndex = 0
  //   }
  //   let colorIndex = stepPolyline.colorIndex % colorArr.length
  //   setStepPolyline(() => ({
  //     colorIndex: ++stepPolyline.colorIndex
  //   }))
  //   let polyline = {
  //     width: 7,
  //     points: _points,
  //     color: colorArr[colorIndex],
  //     dottedLine: _dottedLine,
  //     arrowLine: true, // 带箭头的线, 开发者工具暂不支持该属性
  //     borderColor: '#fff',
  //     borderWidth: 1
  //   }
  //   return polyline
  // }
  //
  // function formatNumber (n) {
  //   const str = n.toString()
  //   return str[1] ? str : `0${str}`
  // }
  //
  // function formatTime (date) {
  //   const year = date.getFullYear()
  //   const month = date.getMonth() + 1
  //   const day = date.getDate()
  //
  //   const hour = date.getHours()
  //   const minute = date.getMinutes()
  //   const second = date.getSeconds()
  //
  //   const t1 = [year, month, day].map(formatNumber).join('/')
  //   const t2 = [hour, minute, second].map(formatNumber).join(':')
  //
  //   return `${t1} ${t2}`
  // }

  return <Map
    id='travel_map'
    onClick={onMapClick}
    latitude={30.006867}
    longitude={106.246223}
    polyline={routes}
    // latitude={currentRoute.latitude}
    // longitude={currentRoute.longitude}
    // polyline={currentRoute.polyline}
    // markers={currentRoute.markers}
  >
  </Map>
})

export default TravelMap
